<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div class="div-relative">
    <Row :gutter="10">
      <Card>
        <div class="table-head" v-show="selectionArr.length == 0">
          <Button type="primary" class="Button" @click="add()">添加</Button>
        </div>
        <div class="table-head" v-show="selectionArr.length > 0">
          <div class="left-nums">选中 {{selectionArr.length}} 条 / 共 {{data.length}} 条</div>
          <div class="left-btn">
            <Button type="warning" class="Button" @click="updateFun()"
                    :disabled="selectionArr.length == 1 ? false : true">修改
            </Button>
          </div>
          <Button type="text" class="Button" @click="hideNums()">取消</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"
                 @on-selection-change="selectionChange" ref="selectionTable" @on-sort-change="onSortChange"></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Card>
      <!--编辑-->
      <Modal v-model="addCurrentTableData" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">定时任务调度</h3>
        <Form label-position="top">
          <FormItem label="功能">
            <Select v-model="type_id" :transfer="true" style="width:100%;">
              <Option v-for="item in typeArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="标题">
            <Input v-model="addData.name" placeholder="标题"></Input>
          </FormItem>
          <FormItem label="类名">
            <Input v-model="addData.clazz" placeholder="类名"></Input>
          </FormItem>
          <FormItem label="定时表达式">
            <Input v-model="addData.cron_expression" placeholder="定时表达式"></Input>
          </FormItem>
          <FormItem label="状态">
            <Select v-model="is_enabled" :transfer="true" style="width:100%;">
              <Option v-for="item in is_enabled_Arr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideAddModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="save()">确定</Button>
        </div>
      </Modal>
    </Row>
    <spin-page :showSpin="showSpin"></spin-page>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import spinPage from '../components/spin-page.vue';
  export default {
    components: {
      spinPage
    },
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        order_by: [],
        id: '',
        searchConName: '',
        searchConTel: '',
        showCurrentTableData: false,
        loading: true,
        saveLoading: false,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'type',
            title: '功能',
            align: 'center',
            sortable: 'custom',
            render: (h, params) => {
              var type = params.row.type;
              switch (type) {
                case 'journal' :
                  type = '日志';
                  break;
                case 'task' :
                  type = '任务';
                  break;
                case 'clock' :
                  type = '签到';
                  break;
                case 'retire' :
                  type = '退休';
                  break;
                case 'sms' :
                  type = '短信';
                  break;
                case 'contract' :
                  type = '合同管理';
                  break;
                case 'customer' :
                  type = '客户管理';
                  break;
              }
              return h('div', [
                h('span', type)
              ]);
            }
          },
          {
            key: 'name',
            title: '标题',
            align: 'center',
            sortable: 'custom',
          },
          {
            key: 'is_enabled',
            title: '状态',
            align: 'center',
            sortable: 'custom',
            render: (h, params) => {
              var is_enabled = params.row.is_enabled;
              switch (is_enabled) {
                case 'N' :
                  is_enabled = '关闭';
                  break;
                case 'Y' :
                  is_enabled = '开启';
                  break;
                default :
                  break;
              }
              return h('div', [
                h('span', is_enabled)
              ]);
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 200,
            align: 'center',
            render: (h, params) => {
              var background = '';
              var btn = '';
              var is_enabled = params.row.is_enabled;
              if (is_enabled == 'Y') {
                btn = '关闭';
                background = 'red';
              } else {
                btn = '开启';
                background = '#2E7D32';
              }
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    border: 'none',
                    background: background
                  },
                  on: {
                    click: e => {
                      e.stopPropagation();
                      var data = params.row;
                      this.start(data);
                    }
                  }
                }, btn)
              ]);
            }
          }
        ],
        data: [],
        dataDetail: {},
        initTable: [],
        format: Util.constant.format,
        addCurrentTableData: false,
        ajaxType: 'add',
        addData: {
          name: '',
          clazz: '',
          cron_expression: '',
        },
        type_id: '',
        typeArr: [
          {
            id: 'journal',
            name: '日志',
          },
          {
            id: 'task',
            name: '任务',
          },
          {
            id: 'clock',
            name: '签到',
          },
          {
            id: 'retire',
            name: '退休',
          },
          {
            id: 'sms',
            name: '短信',
          },
          {
            id: 'contract',
            name: '合同管理',
          },
          {
            id: 'customer',
            name: '客户管理',
          },
        ],
        is_enabled: 'N',
        is_enabled_Arr: [
          {
            id: 'Y',
            name: '开启',
          },
          {
            id: 'N',
            name: '关闭',
          },
        ],
        selectionArr: [],
        showSpin: false,//加载中
      };
    },
    mounted () {
      this.getData();
    },
    methods: {
      // 排序
      onSortChange: function (data) {
        var _this = this;
        var column = data.column;
        var key = data.key;
        switch (key) {
          case 'permission' :
            key = 'permission';
            break;
        }
        var order = data.order;
        if (order == 'asc' || order == 'desc') {
          var orderObj = {
            field: key,
            sort: order,
          };
          _this.order_by = [orderObj];
          _this.getData();
        } else {
          _this.order_by = [];
          _this.getData();
        }
      },
      getData () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
          order_by: _this.order_by,
        };
        var params = {
          url: '/job-manage/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.showSpin = true;
        function _successFun(res) {
          _this.showSpin = false;
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.data = _data;
            _this.hideNums();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      // 开启、关闭
      start (_data) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          id: _data.id,
          is_enabled: _data.is_enabled == 'N' ? 'Y' : 'N'
        };
        var params = {
          url: '/job-manage/start',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.getData();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('设置失败!');
          }
        }
      },
      changePage (page) {
        var _this = this;
        _this.page = page;
        _this.getData();
      },
      onRowData: function (data, index) {
        var _this = this;
        //_this.show(index, data);
      },
      show: function (index, data) {
        var _this = this;
        var id = data.asset_type.id;
        _this.id = id;

        var data = {
          id: _this.id,
        };
        var params = {
          url: '/asset/repair/query',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.dataDetail = _data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 取消列表选中
      hideNums: function () {
        var _this = this;
        this.$refs.selectionTable.selectAll(false);
        _this.selectionArr = [];
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      // 隐藏编辑页面
      hideAddModal: function () {
        var _this = this;
        _this.addCurrentTableData = false;
      },
      // 显示添加界面
      add: function () {
        var _this = this;
        _this.addData.name = '';
        _this.addData.clazz = '';
        _this.addData.cron_expression = '';
        _this.type_id = '';
        _this.is_enabled = 'N';
        _this.ajaxType = 'add';
        _this.addCurrentTableData = true;
      },
      // 列表上修改
      updateFun: function () {
        var _this = this;
        var selectionArr = _this.selectionArr;
        if (selectionArr.length == 0) {
          _this.$Message.destroy();
          _this.$Message.error('请选择要修改的数据!');
          return false;
        }
        if (selectionArr.length > 1) {
          _this.$Message.destroy();
          _this.$Message.error('一次只能修改一条数据!');
          return false;
        }
        var data = selectionArr[0];
        _this.update(data);
      },
      // 修改
      update: function (_data) {
        var _this = this;
        _this.id = _data.id;
        _this.addData.name = _data.name;
        _this.addData.clazz = _data.clazz;
        _this.addData.cron_expression = _data.cron_expression;
        _this.type_id = _data.type;
        _this.is_enabled = _data.is_enabled;
        _this.ajaxType = 'update';
        _this.addCurrentTableData = true;
      },
      // 保存数据
      save: function () {
        var _this = this;
        var name = _this.addData.name;
        var clazz = _this.addData.clazz;
        var cron_expression = _this.addData.cron_expression;
        var type_id = _this.type_id;
        var is_enabled = _this.is_enabled;
        var data = {
          id: _this.id,
          name: name,
          type: type_id,
          clazz: clazz,
          cron_expression: cron_expression,
          is_enabled: is_enabled,
        };
        var url = '/job-manage/add';
        if (_this.ajaxType == 'update') {
          url = '/job-manage/update';
        }
        var params = {
          url: url,
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.saveLoading = true;
        function _successFun(res) {
          _this.saveLoading = false;
          if (res.result == 0) {
            _this.page = 1;
            _this.getData();
            _this.addCurrentTableData = false;
            _this.addData.name = '';
            _this.addData.clazz = '';
            _this.addData.cron_expression = '';
            _this.type_id = '';
            _this.is_enabled = 'N';
          } else {
            _this.$Message.destroy();
            _this.$Message.error('保存信息失败!');
          }
        }
      },

    }
  };
</script>
